﻿<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>正在加载请稍候...</title>
    <link href="../Comm/fonts/font-icons.min.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
    <!--表单样式-->
    <link href="../Admin/CSS/FoolFrmBody.css" rel="stylesheet" />
    <!-- layui -->
    <link href="../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
    <link href="../Scripts/layui/style/admin.css" rel="stylesheet" />
    <link href="../Scripts/layui/layui/css/autocomplete.css" rel="stylesheet" />
    <script src="../Scripts/layui/layui/layui.js" type="text/javascript"></script>
    <script src="../Scripts/layui/LayuiDialog.js" type="text/javascript"></script>
    <!--通用的JS-->
    <script src="../Scripts/config.js" type="text/javascript"></script>
    <script src="../Comm/Gener.js" type="text/javascript"></script>
    <script src="../Scripts/QueryString.js" type="text/javascript"></script>
    <script src="./JS/tinymce/tinymce.min.js"></script>
    <script src="ChapterFrmGener.js"></script>
    <script src="./JS/jspdf.min.js"></script>
    <script src="./JS/html2canvas.min.js"></script>
    <script src="JS/FrmDBRemark.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

        layui.use(['tree', 'dropdown', 'form', 'jquery'], function () {
            var tree = layui.tree, $ = layui.jquery, dropdown = layui.dropdown;
            var frmID = null;
            var oid = null;
            var key = GetQueryString('attrKey');
            var isFrm = false;
            var isDtl = false;
            var name = null;
            var treelist = null;
            var oper = 1;
            var apArr = [];
            var group = [];
            var num = 0;
            var ptype = null;
            //页面启动函数.
            $(function () {

                frmID = GetQueryString("FrmID");
                oid = GetQueryString("WorkID");
                if (oid == null)
                    oid = GetQueryString("OID");


                var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
                handler.AddPara("FrmID", frmID);
                handler.AddPara("OID", oid);
                var data = handler.DoMethodReturnJSON("ChapterFrm_Init");

                var groupFields = data["GroupFields"];//章.
                var attrs = data["MapAttrs"];//节.

                //获得第一个Key值.
                GenerFistKey(key, groupFields, attrs);


                //形成数据.
                for (var i = 0; i < groupFields.length; i++) {
                    var gf = groupFields[i];
                    gf.children = [];
                    var list = {
                        title: gf.Lab,
                        id: gf.FrmID,
                        field: gf.Lab,
                        spread: true,
                        children: gf.children,
                        checked: false,
                        ...gf
                    }
                    for (var idx = 0; idx < attrs.length; idx++) {
                        var attr = attrs[idx];
                        var clist = {
                            title: attr.Name,
                            id: attr.KeyOfEn,
                            field: attr.Name,
                            checked: false,
                            pName: gf.Lab,
                            ...attr
                        }

                        if (clist.GroupID == list.OID) {
                            list.children.push(clist)
                        }

                    }
                    group.push(list)
                }
                
                function iframeFun(id, url, OId, item) {
                    var myframe = document.getElementById(id).contentWindow;
                    if (myframe.Save != undefined) {
                        myframe.Save();
                        CheckGroupFieldStr(OId, item);
                    }
                    if (myframe.SaveAll != undefined) {
                        myframe.SaveAll();
                        CheckGroupFieldStr(OId, item);
                    }
                    $("#toIframe").show();
                    $("#toIframe").attr("src", url);
                    $("#textRea").hide()

                }

                tree.render({
                    elem: '#test1' //默认是点击节点可进行收缩
                    , data: group,
                    click: function (obj) {
                        ptype = null;
                        //$("#print").hide();
                        //$("#docs").show();
                        $('.layui-tree-set').removeClass("tree-txt-active");
                        $(".layui-card-header").show();
                        if (!obj.data.children) {
                            //$("#template").show();
                            $("#toIframe").hide();
                            $("#textRea").show();
                            if (name != obj.data.Name) {
                                name = obj.data.Name;
                                key = obj.data.KeyOfEn;
                                ChapterFrmShow(key)
                                $("#Title").html(name);
                                $("#layui-card-header").show();
                                //addtitle(key)
                            }
                            isFrm = false;
                            isDtl = false;
                            $(obj.elem[0]).addClass("tree-txt-active");
                        } else {
                            $(".layui-card-header").hide();
                            //如果点击章.
                            if (obj.data.CtrlType == "") {
                                return;
                            }
                            if (obj.data.CtrlType == "Dtl") {
                                $("#toIframe").show();
                                $("#Title").html('')
                                var url = Ele_Dtl(obj.data.CtrlID,1);
                                $("#toIframe").attr("src", url);
                                $("#textRea").hide();
                                isFrm = false;
                                isDtl = true;
                                key = obj.data.CtrlID;
                                name = obj.data.Lab;
                            }

                            if (obj.data.CtrlType == "Ath") {
                                $("#toIframe").show();
                                $("#Title").html('')
                                var url = basePath + "/WF/CCForm/Ath.htm?1=1&AthPK=" + obj.data.CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node") + "&IsReadonly=1";
                                $("#toIframe").attr("src", url);
                                $("#textRea").hide();
                                //$("#template").hide();
                            }

                            if (obj.data.CtrlType == "ChapterFrmLinkFrm") {
                                $("#toIframe").show();
                                var url = basePath + "/WF/CCForm/Frm.htm?IsReadonly=1&FrmID=" + obj.data.CtrlID + "&OID=" + oid + "&FK_MapData=" + obj.data.CtrlID + "&FK_Node=" + GetQueryString("FK_Node");
                                $("#toIframe").attr("src", url);
                                $("#textRea").hide();
                                $("#Title").html('')
                                //$("#template").show();
                                isFrm = true;
                                key = obj.data.CtrlID;
                                isDtl = false;
                            }

                            if (obj.data.CtrlType == "ChapterFrmSelfUrl") {
                                $("#toIframe").show();
                                var url = '';
                                if (obj.data.CtrlID.indexOf('http') == 0)
                                    var url = obj.data.CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node") + "&IsReadonly=1";
                                else
                                    var url = basePath + "" + obj.data.CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node") + "&IsReadonly=1";

                                $("#toIframe").attr("src", url);
                                $("#textRea").hide();
                                //$("#template").hide();
                                $("#Title").html('')
                            }
                            $('.layui-tree-set').removeClass("tree-txt-active");
                            $(obj.elem[0]).addClass("tree-txt-active");

                        }

                    }
                });

                // 判断第一项是否有子集 并选中状态 跳转iframe页面
                function treeSet() {
                    treelist = document.querySelectorAll('.layui-tree-pack >.layui-tree-set');
                    treelist.forEach((item, index) => {
                        var main = $(item).find('.layui-tree-txt');
                        var hm = `<span>(${index + 1})&nbsp;</span>`;
                        $(main).before(hm);
                        $(item).find('.layui-tree-iconClick').hide();
                        db.push({
                            "attrKey": item.dataset.id,
                            "vals": '',
                        });

                    })
                    Tree_set = document.querySelectorAll('.layui-tree>.layui-tree-set');

                    Tree_set.forEach((item, index) => {
                        $(item).attr("title", group[index].title);
                        $(item).attr("id", "Pnode" + group[index].OID);

                        var main = $(item).find('.layui-tree-pack ');
                       // var h = `<i class="icon-check rate"></i>`;
                       // $(item).find(".layui-tree-main").append(h);
                        //替换 tree icon
                        if (item.childNodes.length == 1) {
                            var sclass = $(item).find('.layui-tree-iconClick');
                            $(sclass).empty();
                            if (group[index].CtrlType == "Dtl") {
                                // let i = `<i class="icon-notebook"></i>`
                                let i = `<i class="icon-folder"></i>`
                                $(sclass).html(i);
                            }

                            if (group[index].CtrlType == "Ath") {
                                let i = `<i class="icon-paper-clip"></i>`
                                $(sclass).html(i);
                            }

                            if (group[index].CtrlType == "ChapterFrmLinkFrm") {
                                let i = `<i class="icon-folder"></i>`
                                $(sclass).html(i);
                            }

                            if (group[index].CtrlType == "ChapterFrmSelfUrl") {
                                let i = `<i class="icon-folder"></i>`
                                $(sclass).html(i);
                            }
                        } else {
                            var sclass = $(item).find('.layui-tree-iconClick');
                            $(sclass).empty();
                            $(sclass).removeClass("layui-tree-icon")
                            let i = `<i class="icon-folder"></i>`
                            $(sclass).html(i);
                        }
                        //默认第一个选中
                        if (index == 0) {
                            if (main.length == 0) {
                                $('.layui-tree-set').removeClass("tree-txt-active");
                                $(item).addClass("tree-txt-active");
                                var url = '';
                                //如果点击章.
                                if (group[index].CtrlType == "Dtl") {
                                    url = Ele_Dtl(group[index].CtrlID);
                                }

                                if (group[index].CtrlType == "Ath") {
                                    url = basePath + "/WF/CCForm/Ath.htm?IsReadonly=1&AthPK=" + group[index].CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node");
                                }

                                if (group[index].CtrlType == "ChapterFrmLinkFrm") {
                                    url = basePath + "/WF/CCForm/Frm.htm?IsReadonly=1&FrmID=" + group[index].CtrlID + "&OID=" + oid + "&FK_MapData=" + group[index].CtrlID + "&FK_Node=" + GetQueryString("FK_Node");
                                }

                                if (group[index].CtrlType == "ChapterFrmSelfUrl") {
                                    if (group[index].CtrlID.indexOf('http') == 0)
                                        url = group[index].CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node") + "&IsReadonly=1";
                                    else
                                        url = basePath + "" + group[index].CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node") + "&IsReadonly=1";
                                }
                                if (group[index].CtrlType == '') {
                                    return;
                                }
                                eleOneDom = item;
                                OId = group[index].OID;
                                iframeFun("toIframe", url, OId, eleOneDom);
                            } else {
                                item.checked = true;
                                item.children[index].checked = true;
                                key = item.children[index].KeyOfEn;
                                tinyInit();
                                treelist[index].classList.add("tree-txt-active");
                                name = group[index].children[index].Name;
                                $("#Title").html(name)
                                getContent(treelist[index].dataset.id);
                                Tip = group[index].children[index].Tip;
                                eleDom = $(treelist[index]).find(".rate");
                            }
                        }
                        
                    })
                    showType(group, Tree_set)
                }
                treeSet();
            });

            function showType(group, Tree_set) {
                let n = 0;
                group.forEach((item, index) => {
                    if (item.ShowType == 2) {
                        n = n + 1;
                        const Id = item.OID;
                        console.log($(`#Pnode${Id}`))
                        $(`#Pnode${Id}`).hide()
                    }
                })
                if (n == group.length) {
                    $("#menuShow").hide()
                }
            }

            function ChapterFrmShow(attrKey) {
                InitPara();
                if (attrKey == null || attrKey == "") {
                    alert("字段值为空.");
                    return;
                }
                var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
                handler.AddPara("FrmID", frmID);
                handler.AddPara("OID", oid);
                handler.AddPara("KeyOfEn", attrKey);
                var data = handler.DoMethodReturnString("ChapterFrm_InitOneField");
                AddNoDuplicateElements(attrKey, data);

            }
            //添加title名
            function addtitle(key) {
                group.forEach((item, index) => {
                    if (item.children.length > 0) {
                        item.children.forEach(ite => {
                            if (ite.id == key) {
                                name = ite.Name;
                                $("#Title").html(name)

                            }
                        })
                    }
                });
            }

            //append html
            function AddNoDuplicateElements(ele, data) {

                if (ptype != 'print') {
                    var aphtml = `<div class="itemlist" id="ele_${ele}">
                                                    <div id="title_${ele}"></div>
                                                   <div><h4 id="n_${ele}"></h4><p>${data}</p></div>
                                                  </div>`
                    var arr = []
                    arr.push(ele)
                    for (var i = 0; i < arr.length; i++) {
                        if (apArr.indexOf(arr[i]) === -1) {
                            apArr.push(arr[i]);
                            $("#docs").append(aphtml);
                        }
                    }
                    $("#docs .itemlist").hide();
                    $("#ele_" + ele).show();
                    addtitle(ele)
                } else {
                    var aphtml = `<div class="itemlist">
                                                   <div id="tit_${ele}"></div>
                                                    <div><h4 id="nt_${ele}"></h4><p>${data}</p></div>
                                                  </div>`
                    $("#print").append(aphtml);
                    addtitle(ele)
                }


            }


            $('#View').click(function () {
                if (key == undefined || key == '') {
                    layer.msg('请先选择子节点', { icon: 6 });
                    return;
                } else {
                    var url = "ChapterFrmView.htm?FrmID=" + frmID + "&OID=" + oid + "&attrKey=" + key;
                    // WinOpenFull(url);
                    OpenLayuiDialog(url, '', '1200', '', '', false)
                }

            })
            $('#Exp').click(function () {
                var url = "ChapterFrmExp.htm?FrmID=" + frmID + "&OID=" + oid + "&attrKey=" + key;
                // WinOpenFull(url);
                OpenLayuiDialog(url, '', '1200', '', '', false);
                layer.load(0, {
                    shade: [0.6, '#fff'],
                    content: '下载中...',
                    success: function (layero) {
                        layero.find('.layui-layer-content').css({
                            'padding-top': '35px',
                            'text-align': 'center',
                            'z-index': '19891016'
                        });
                    }
                });
                ;
            })

        })

    </script>

    <style type="text/css">
        .border_1 {
            border: 1px solid #ccc;
            height: 96vh;
        }

        .padding-5 {
            padding: 10px;
        }

        .layui-right {
            width: 120px;
            height: 100%;
            text-align: center;
            position: absolute;
            right: 10px;
            top: 0;
        }

            .layui-right a {
                display: block;
                height: 100%;
                width: 100%;
            }

        .layui-left {
            width: 60px;
            height: 100%;
            text-align: center;
            position: absolute;
            left: 20px;
            top: 0;
        }

            .layui-left a {
                display: block;
                height: 100%;
                width: 100%;
            }

        .tree-txt-active {
            background: #dcdcdc;
        }

        .layui-card-body {
            height: 80vh;
            overflow: hidden
        }

        .layui-tree-entry .layui-tree-txt {
            font-weight: 600;
        }

        .layui-tree-pack .layui-tree-txt {
            font-weight: 300;
        }

        .layui-tab-title {
            text-align: center
        }

        #toIframe {
            display: none;
            width: 100%;
            border: none;
            height: 96vh;
        }

        .layui-tab-content {
            padding: 0;
        }

        .layui-tab {
            margin: 0;
        }

        .h-100 {
            height: 96vh;
            overflow: auto;
        }

        .site-dropdown-demo,
        .site-dropdown-demo .layui-menu {
            background-color: #000;
            border: none;
        }

            .site-dropdown-demo .layui-menu li {
                color: #fff;
            }

                .site-dropdown-demo .layui-menu li:hover {
                    background-color: #333;
                }

        #docs {
            height: 96vh;
            overflow: auto;
        }

        .layui-card {
            height: auto;
        }

        .layui-card-body {
            height: auto
        }

        #print .itemlist {
            margin-bottom: 10px;
        }

            #print .itemlist h3 {
                margin-bottom: 10px;
                text-align: center
            }

        .labelTitle {
            height: 40px;
            text-align: center;
            padding-right: 28px;
            line-height: 40px;
            background: #fff;
            font-size: 18px;
            font-weight: bold;
            width: 90%;
        }

        .layui-card-header {
            display: block ruby;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px #999;
            background-color: #999;
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px #ddd;
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        ::-webkit-scrollbar {
            width: 4px;
            height: 0px;
            background-color: #F5F5F5;
        }
        .rate{
            margin:5px;
        }
    </style>
</head>

<body id="content" style="overflow:hidden">
    <!--startprint1-->
    <div class="layui-row">
        <div class="layui-col-sm3 layui-col-md3 layui-col-xs3">
            <div class="layui-tab layui-tab-brief" lay-filter="docTabBrief">
                <!-- <div class="layui-tab-title">
                    <button class="layui-btn layui-btn-primary layui-btn-sm" id="View">预览</button>
    <button class="layui-btn layui-btn-primary layui-btn-sm" id="Exp">导出</button>
            </div>-->
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div id="test1" class="demo-tree demo-tree-box" style="height: calc(100vh - 70px); overflow-x: auto "></div>
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-col-sm9 layui-col-md9 layui-col-xs9" style="overflow-y:hidden">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="labelTitle" id="Title"></div>
                    <!--<div class="layui-right" id="template">
                        <button class="layui-btn layui-btn-primary layui-btn-sm">审阅&版本</button>
                    </div>-->
                </div>
                <div class="layui-card-body">
                    <div class="layui-form" id="textRea">
                        <div id="docs"></div>
                    </div>
                    <div class="layui-form">
                        <iframe id="toIframe" frameborder="0" style="width: 100%; height: calc(100vh - 40px); " scroll=no></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--endprint1-->
</body>

</html>